<template>
  <div id="shareholderCenter">
    <c-title :hide="false" :text="mailFullReturnTitle"></c-title>

    <div class="share_holder">
      <div class="left">
        <span>{{ $i18n.t("money") }}{{ returnAmountTotal ? returnAmountTotal.toFixed(2) : 0 }} </span><br />
        <span>{{ mailFullReturnName }}总额(元)</span>
      </div>
    </div>

    <div class="share_info">
      <div>
        <span>{{ $i18n.t("money") }}{{ alreadyReturn }}</span
        ><br />
        已{{ mailFullReturnName }}总额(元)
      </div>
      <div>
        <span>{{ $i18n.t("money") }}{{ notReturn }}</span
        ><br />
        未{{ mailFullReturnName }}总额(元)
      </div>
    </div>
    <template v-if="newis">
      <div class="share_info">
        <div>
          权益补贴进度
        </div>
        <div @click="toRecord">
          查看明细
          <i class="iconfont icon-course_goon"></i>
        </div>
      </div>
      <div class="share_info">
        <div>
          <span>{{ rest_performance }}</span
          ><br />
          剩余销售业绩
        </div>
        <div>
          <span>{{ rest_consume }}</span
          ><br />
          剩余自购业绩
        </div>
      </div>
    </template>

    <div class="shareholder-order" v-if="isShow">
      <div id="tabs">
        <van-tabs v-model="activeName" @change="tabChange">
          <van-tab name="first">
            <span slot="title" @click="handleClick('0')">{{ mailFullReturnLog }}</span>
          </van-tab>
          <van-tab name="two" v-if="newis">
            <span slot="title" @click="handleClick('1')">业绩扣除记录</span>
          </van-tab>
        </van-tabs>
        <div>
          <div v-show="activeName == 'first'">
            <ul class="rationList">
              <li v-for="(elem, i) in record" class="list" :key="i">
                <h4>
                  {{ mailFullReturnLog }}ID:{{ elem.id }}
                  <span>{{ elem.amount }}</span>
                </h4>

                <div class="one">
                  <div class="time">
                    <span class="left">{{ mailSingleReturnName }}时间ID:{{ elem.id }}</span>
                    <span class="right">{{ elem.created_at }}</span>
                  </div>
                  <div class="Record" @click="toReturnInfo(elem.id)" v-if="!newis">
                    <span class="left look">查看记录</span>
                    <i class="fa fa-angle-right"></i>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-show="activeName == 'two' && newis">
            <ul class="rationList">
              <li v-for="(elem, i) in record" class="list" :key="i">
                <h4>
                  队列ID:{{ elem.queue_id }}
                  <span style="color: #8c8c8c; font-size: 0.625rem;">{{ elem.created_at }}</span>
                </h4>

                <div class="one" style="padding-bottom: 0.625rem;">
                  <div class="time">
                    <span class="left">扣除的自购业绩:{{ elem.consume }}</span>
                  </div>
                  <div class="time">
                    <span class="left">扣除的销售业绩:{{ elem.performance }}</span>
                  </div>
                  <div class="time">
                    <span class="left">权益探币个数:{{ elem.total }}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import full_return_center_controller from "./full_return_center_controller";

export default full_return_center_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
p {
  margin: 0;
  padding: 0;
}

#shareholderCenter {
  .m_header {
    width: 100%;
    height: 2.8125rem;
    line-height: 2.8125rem;
    font-size: 15px;
    font-weight: bold;
    background: #fff;

    span {
      display: inline-block;
      width: 1rem;
      height: 1.5rem;
      float: left;
      margin-left: 0.625rem;
      font-size: 30px;
    }
  }

  .share_holder {
    padding: 1rem 0.75rem;
    box-sizing: border-box;
    background-color: #f15353;

    .left {
      width: 55%;
      text-align: left;
      color: #fff;
      box-sizing: border-box;

      span:first-child {
        font-weight: bold;
        font-size: 20px;
      }

      span {
        line-height: 1.5rem;
        font-size: 14px;
      }
    }

    .right {
      width: 45%;
      padding: 2rem 0.9375rem 0 0;
      box-sizing: border-box;
      color: #fff;
      text-align: right;
      line-height: 1.625rem;
      font-size: 12px;
    }
  }

  .share_info {
    width: 100%;
    padding: 1rem 0;
    background-color: #fff;
    margin-bottom: 0.625rem;
    display: flex;
    justify-content: space-between;

    div:first-child {
      border-right: solid 0.0625rem #ebebeb;
    }

    div {
      font-size: 12px;
      line-height: 1.25rem;
      width: 50%;
      box-sizing: border-box;

      span {
        color: #e84f40;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .icon-course_goon {
      font-size: 14px;
    }
  }

  .shareholder-order {
    #tabs {
      .rationList {
        .list {
          margin: 0.375rem 0;
          background-color: #fff;

          h4 {
            width: 100%;
            box-sizing: border-box;
            padding: 0 0.875rem;
            line-height: 2.5rem;
            height: 2.5rem;
            text-align: left;
            color: #333;
            font-size: 14px;
            border-bottom: 0.0625rem solid #ebebeb;

            span {
              display: inline-block;
              font-size: 14px;
              font-weight: normal;
              color: #f15353;
              float: right;
            }
          }

          ul::after {
            content: "";
            display: block;
            clear: both;
          }

          ul {
            width: 100%;
            padding: 0.625rem 0;

            li {
              width: 33%;
              float: left;
              font-size: 12px;
              color: #8c9295;
              line-height: 1.375rem;

              span {
                color: #333;
                font-size: 14px;
              }
            }
          }

          p {
            color: #aab2b9;
            text-align: left;
            box-sizing: border-box;
            padding: 0 1.25rem 0.9375rem;

            span {
              color: #728ae3;
              float: right;
            }
          }
        }

        .recordList {
          padding: 0.9375rem;
          font-size: 14px;
          line-height: 1.125rem;
          color: #333;
          text-align: left;
          background-color: #fff;
          margin: 0.125rem;

          span {
            font-size: 14px;
            float: right;
          }
        }
      }

      .rationList::after {
        content: "";
        display: block;
        clear: both;
      }

      .one {
        padding: 0 0.875rem;

        .time {
          width: 100%;
          line-height: 1.625rem;
          margin-top: 0.625rem;
          display: flex;
          justify-content: space-between;
        }

        .Record {
          width: 100%;
          line-height: 2.75rem;
          display: flex;
          justify-content: space-between;

          i {
            font-size: 20px;
            color: #929292;
            line-height: 2.75rem;
          }
        }

        .left {
          color: #8c8c8c;
          font-size: 14px;
        }

        .look {
          color: #333;
        }

        .right {
          color: #8c8c8c;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
